<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="span1" class="s1" name="s1">span1</span>
<span id="span1" class="s1" name="s1">span2</span>
<span id="span3" class="s2" name="s1">span3</span>
<span id="span1" class="s1">span1</span>
<span id="span1" class="s1">span2</span>
<span id="span3" class="s2">span3</span>
    <script>
        // document.getElementById(元素id)：根据id查找当前页面上的标签。只返回一个标签
        console.log(document.getElementById("span1"));
        let spans = document.getElementsByClassName("s1");
        console.log(spans);
        // spans[0].innerText = "这是JS修改过的内容1";
        // spans[0].textContent = "这是JS修改过的内容1";
        // spans.item(1).innerText = "这是JS修改过的内容2";
    //    将页面上所有class="s1"的标签的内容改为索引值
        for (let i = 0; i < spans.length; i++) {
            spans[i].textContent = i;
        }

        // 获取span标签中内容为3的元素

        // 可以不把spans对象变成数组对象
        console.log(Array.from(spans));

        console.log(document.getElementsByName("s1"));

        // 获取页面上所有叫span的标签
        console.log(document.getElementsByTagName("span"));

        //
    </script>
</body>
</html>